<template>
    <view class="uni-product-list">
        <view class="uni-product" v-for="(product,index) in productList" :key="index">
            <view class="image-view">
                <image v-if="renderImage" mode="aspectFill" @click="demo1(product.id)" class="uni-product-image" :src="product.imgpaths.split(',')[0]"></image>
            </view>
            <view class="uni-product-title">{{product.msg}}</view>
            <view class="uni-product-price">
                <text class="uni-product-price-favour">￥{{product.oprice}}</text>
                <text class="uni-product-price-original">￥{{product.price}}</text>
                <!-- <text class="uni-product-tip">{{product.tip}}</text> -->
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                productList: [],
                renderImage: false,
				query:{
					current:1,
					number:5
				}
            };
        },
        methods: {
            async loadData(action = 'add') {

                if (action === 'refresh') {
                    this.productList = [];
					this.query.current=1;
					this.query.number=5;
                }
				let data=await this.$apis.getIdleList(this.query);
				this.query.current+=1;

                data.forEach(item => {
                    this.productList.push(item);
                });
            },
			demo1(id){
				this.$apis.userSchool().then((rqe)=>{
					
					
					if(rqe){
						this.$mRouter.push({
							route:this.$mRoutesConfig.idledetail,
							query:{id: id}
							
							})
					}else{
						console.log("req==hello")
						uni.showModal({
								title: '提示',
								confirmText:"去完善",
								cancelText:"不用了",
								content: '未绑定学校信息不能进行闲置交易，点击确定去完善信息！',  
								success: function (res) {
									if (res.confirm) {
										console.log('用户点击确定');
										wx.redirectTo({
											url: "/pages/my/editInfo"
										});
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
				
						})
					}
					
				})
				
				
			}
        },
        onLoad() {
            this.loadData();
            setTimeout(() => {
                this.renderImage = true;
            }, 300);
        },
        onPullDownRefresh() {
            this.loadData('refresh');
            // 实际开发中通常是网络请求，加载完数据后就停止。这里仅做演示，加延迟为了体现出效果。
            setTimeout(() => {
                uni.stopPullDownRefresh();
            }, 2000);
        },
        onReachBottom() {
            this.loadData();
        }
    };
</script>

<style>
    /* product */
    page {
        background: #F8F8F8;
    }

    view {
        font-size: 28upx;
    }

    .uni-product-list {
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        flex-direction: row;
    }

    .uni-product {
        padding: 20upx;
        display: flex;
        flex-direction: column;
    }

    .image-view {
        height: 330upx;
        width: 330upx;
        margin: 12upx 0;
    }

    .uni-product-image {
        height: 330upx;
        width: 330upx;
    }

    .uni-product-title {
        width: 300upx;
        word-break: break-all;
        display: -webkit-box;
        overflow: hidden;
        line-height: 1.5;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .uni-product-price {
        margin-top: 10upx;
        font-size: 28upx;
        line-height: 1.5;
        position: relative;
    }

    .uni-product-price-original {
        color: #e80080;
    }

    .uni-product-price-favour {
        color: #888888;
        text-decoration: line-through;
        margin-left: 10upx;
    }

    .uni-product-tip {
        position: absolute;
        right: 10upx;
        background-color: #ff3333;
        color: #ffffff;
        padding: 0 10upx;
        border-radius: 5upx;
    }
</style>
